<template>
  <footer class="jd-footer">
    <!-- 服务优势区域 -->
    <div class="service">
      <div
        class="service-item"
        v-for="(item, index) in serviceList"
        :key="index"
      >
        <i :class="`iconfont ${item.icon}`"></i>
        <span>{{ item.text }}</span>
      </div>
    </div>

    <!-- 导航链接区域 -->
    <div class="nav-links">
      <div
        class="link-column"
        v-for="(group, index) in navLinkGroups"
        :key="index"
      >
        <h3>{{ group.title }}</h3>
        <ul>
          <li
            v-for="(link, linkIndex) in group.links"
            :key="linkIndex"
          >
            <a href="#none">{{ link }}</a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 底部信息区域 -->
    <div class="bottom-info">
      <!-- 底部链接 -->
      <p class="links">
        <template v-for="(link, index) in bottomLinks" :key="index">
          <a href="#none">{{ link }}</a>
          <span v-if="index < bottomLinks.length - 1"> | </span>
        </template>
      </p>

      <!-- 备案信息 -->
      <p
        class="record-info"
        v-for="(info, index) in recordInfos"
        :key="index"
      >
        {{ info }}
      </p>

      <!-- 认证图标 - 修复布局，一行展示6个 -->
      <div class="cert-logos">
        <a
          href="#none"
          class="cert-item"
          v-for="(item, index) in certList"
          :key="index"
          :style="{
            backgroundPosition: `0 -${index * 32}px`, // 假设每个图标高80px

          }"
        ></a>
      </div>

      <!-- <button class="feedback-btn" @click="handleFeedback">我要反馈</button>
      <button class="back-top" @click="handleBackTop">↑</button> -->
    </div>
  </footer>
</template>

<script setup>
import { onMounted } from 'vue';

// 模拟引入 iconfont
onMounted(() => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = '//at.alicdn.com/t/c/font_3878400_xxxxxx.css';
  document.head.appendChild(link);
});

// 服务优势数据
const serviceList = [
  { icon: 'icon-duo', text: '品类齐全，轻松购物' },
  { icon: 'icon-kuai', text: '多仓直发，极速配送' },
  { icon: 'icon-hao', text: '正品行货，精致服务' },
  { icon: 'icon-sheng', text: '天天低价，畅选无忧' }
];

// 导航链接数据
const navLinkGroups = [
  {
    title: '购物指南',
    links: [
      '购物流程', '会员介绍', '生活旅行/团购',
      '常见问题', '大家电', '联系客服'
    ]
  },
  {
    title: '配送方式',
    links: [
      '上门自提', '211限时达', '配送服务查询',
      '配送费收取标准'
    ]
  },
  {
    title: '支付方式',
    links: [
      '货到付款', '在线支付', '分期付款',
      '公司转账'
    ]
  },
  {
    title: '售后服务',
    links: [
      '售后政策', '价格保护', '退款说明',
      '返修/退换货', '取消订单'
    ]
  },
  {
    title: '特色服务',
    links: [
      '夺宝岛', 'DIY装机', '延保服务',
      '京东E卡', '京东通信', '京鱼座智能'
    ]
  }
];

// 底部链接数据
const bottomLinks = [
  '关于我们', '联系我们', '联系客服', '合作招商',
  '商家帮助', '营销中心', '手机京东', '友情链接',
  '销售联盟', '京东社区', '风险监测', '质量公告',
  '隐私政策', '京东公益', 'Media & IR'
];

// 备案信息数据
const recordInfos = [
  '京公网安备 11000002000088号 | 京ICP备11041704号 | ICP | 药品医疗器械网络信息服务备案 | 自营医疗器械经营资质 | 药品网络交易第三方平台备案凭证 | 新出发京零 字第大120007号',
  '互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 违法和不良信息举报电话：4006561155',
  'Copyright © 2004 - 2025 京东JINGDONG 版权所有 | 消费者维权热线：4006067733 | 经营证照 | 医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号 | 营业执照',
  '增值电信业务经营许可证 | 京东旗下网站：京东钱包 | 京东云'
];

// 认证图标数据（精灵图）- 明确设置为6个图标
const certList = new Array(6).fill({});


</script>

<style scoped lang="scss">
.jd-footer {
  background-color: rgb(234, 234, 234);
  color: #666;
  font-size: 12px;
  padding: 20px 0;

  .service {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;

    .service-item {
      display: flex;
      align-items: center;
      margin: 0 30px;

      i {
        font-size: 24px;
        color: #e1251b;
        margin-right: 5px;
      }

      span {
        font-weight: 700;
      }
    }
  }

  .nav-links {
    display: flex;
    justify-content: center;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    padding: 20px 0;

    .link-column {
      margin: 0 40px;

      h3 {
        font-size: 14px;
        margin-bottom: 10px;
        color: #333;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          margin: 5px 0;

          a {
            color: #666;
            text-decoration: none;
            &:hover {
              color: #e1251b;
            }
          }
        }
      }
    }
  }

  .bottom-info {
    text-align: center;
    padding: 20px 0;

    .links {
      margin-bottom: 10px;

      a {
        color: #666;
        text-decoration: none;
        margin: 0 5px;
        &:hover {
          color: #e1251b;
        }
      }
    }

    .record-info {
      margin: 5px 0;
      line-height: 1.6;
    }

    .cert-logos {
      margin: 10px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 90%;
      padding: 0 10px;
      box-sizing: border-box;

      .cert-item {
        width: 103px;
        height: 32px;
        background-image: url('./imgs/splits.png'); // 替换成实际精灵图地址
        background-repeat: no-repeat;
        display: inline-block;
        margin: 0 8px; // 调整间距，确保6个图标能放下
        // 确保图标尺寸一致
        flex-shrink: 0;
      }
    }


  }
}
</style>
